<template>
    <div class="">
        <div class="us-title">
            <br/>
            <br/>
            <br/>
            <p class="us-p">实验室报修</p>
        </div>
        <div class="us-text">请填写完成下列信息：</div>
        <div class="us-main">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="门牌号" prop="doorNumber">
                    <el-select  v-model="ruleForm.doorNumber.doorNumber" placeholder="请选择实验室门牌号"  style="width: 98%">
                        <el-option v-for="item in ruleForm.doorNumber" :key="item.doorNumber" :label="item.doorNumber" :value="item.doorNumber"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="报修物品" prop="repairItem">
                    <el-input v-model="ruleForm.repairItem"></el-input>
                </el-form-item>
                <el-form-item label="故障详情" prop="faultPhenomenon">
                    <el-input v-model="ruleForm.faultPhenomenon"></el-input>
                </el-form-item>
                <el-form-item label="报修人员" prop="studentName">
                    <el-input v-model="ruleForm.studentName"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="phoneNumber">
                    <el-input v-model="ruleForm.phoneNumber"></el-input>
                </el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">点击报修</el-button>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                doorNumber:'',
                ruleForm:{
                    doorNumber:[{
                        doorNumber:'',
                    }],
                    repairItem: '',
                    faultPhenomenon: '',
                    studentName: '',
                    phoneNumber: '',
                    repairStatus: '',
                },
                rules: {
                    repairItem: [
                        { required: true, message: '请输入设备编号', trigger: 'blur' },
                    ],
                    faultPhenomenon: [
                        { required: true, message: '请输入设备名称', trigger: 'blur' },
                    ],
                    studentName: [
                        { required: true, message: '请输入设备品牌', trigger: 'blur' },
                    ],
                    phoneNumber: [
                        { required: true, message: '请输入参数信息', trigger: 'blur' },
                    ],
                }
            }
        },
        created(){
            this.getData()
        },
        methods:{
            getData(){
                this.$axios.get('text/repairlab/querydoornumber').then((res) => {
                    this.ruleForm.doorNumber= res.data.data;
                })
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$axios.post('text/repairlab/insert?' +
                            'doorNumber=' + this.ruleForm.doorNumber.doorNumber +
                            "&repairItem=" + this.ruleForm.repairItem+
                            "&faultPhenomenon=" + this.ruleForm.faultPhenomenon+
                            "&studentName=" + this.ruleForm.studentName+
                            "&phoneNumber=" + this.ruleForm.phoneNumber+
                            "&repairStatus=" + '未修'
                        ).then((res) => {
                            if(res.data.code==200)
                            {
                                this.$message({
                                    message: '报修实验室成功！！',
                                    type: 'success'
                                });
                            }

                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
        }
    };
</script>

<style scoped>
    @media (min-width:400px){

        .us-title{
            width: 100%;
            height: 200px;
            text-align: center;
            font-size: 30px;
            font-weight: bolder;
        }
        .us-p{

            font-family: 华文行楷;
            font-size: 50px;
        }
        .us-main{
            text-align: center;
        }
        .us-main button{
            width: 250px;
            height: 45px;
            margin: 20px;


        }
        .us-text{
            margin-top: 30px;
            margin-left: 20px;
            font-size: 30px;
            height: 50px;
            margin-bottom: auto;
        }

    }

    @media (max-width: 768px){
        .us-title{
            width: 100%;
            height:250px;
            text-align: center;
            font-size: 40px;
            font-family: 宋体;
            background-image: url("../../assets/2.jpg");
        }
        .us-p{
            color: #FFA07A;
        }
        .us-main{
            text-align: center;
        }
        .us-main button{
            width: 150px;
            height: 60px;
            border: 0px;
            font-family: 宋体;
            border-radius: 10px;
            font-size: 22px;
            font-style: inherit;
            color: white;
        }
        .us-text{
            margin-top: 30px;
            margin-left: 20px;
            font-family:隶书;


        }
        .us-b{
            margin-top: 80px;
            text-align: center;
            font-size: 13px;
        }
    }
</style>
